<template>
  <div class="shops-horizontal-shop">
    <div class="fx shops-horizontal-shop-p-box" v-if="shopList.title || shopList.title_en">
        <p v-if="shopList.title" class="shops-horizontal-shop-p">{{shopList.title}}</p>
        <p v-if="shopList.title_en" class="shops-horizontal-shop-p2">{{shopList.title_en}}</p>
      </div>
    <div class="shops-horizontal-shop-box">
      <div class="supplier-shop" v-for="(item,i) in shopList.pro"  :key="i">
          <img :src="$fnc.getImgUrl(item.piclink)"  radius="5" />
          <p class="supplier-shop-title">{{item.title.length>=7?item.title.slice(0,7)+'...':item.title}}</p>
          <div class="supplier-shop-price fx">
            <div>
              <p>
                <small>￥</small>{{item.price}}
                <small>起</small>
              </p>
              <p class="tl">
                <span>￥</span>
                <small>{{item.market_price}}</small>
              </p>
            </div>
            <div>抢</div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "shops-horizontal-shop",
  props:{
      shopList:{
          type:Object,
          default:()=>{}
      }
  },
  data() {
    return {};
  },
  components: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style lang='less' scoped>
.shops-horizontal-shop-p-box{
  justify-content: flex-start;
    margin-bottom: 16px;
}
.shops-horizontal-shop {
  padding: 16px 11px 20px 16px;
  .shops-horizontal-shop-p {
    font-size: 18px;
    color: #2c2c2c;
    font-weight: bold;
  }
  .shops-horizontal-shop-p2{
      font-size: 15px;
      color: #d4d4d4;
      font-weight: 400;
      margin-left: 10px;
    }
  .shops-horizontal-shop-box {
    width: 100%;
    height: 185px;
    img{
        display: block;
        width: 108px;
        height: 108px;
        max-width: inherit;
        max-height: inherit;
        border-radius: 5px;
    }
    overflow-x: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
}
.supplier-shop {
  font-size: 14px;
  line-height: 1.1;
  margin-right: 12px;
  .supplier-shop-title {
    font-size: 13px;
    margin: 10px 0;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #282828;
    font-weight: bold;
  }
  .supplier-shop-price {
    > div:first-child {
      > p:first-child {
        color: #363636;
        font-size: 15px;
        font-weight: bold;
        margin-bottom: 7px;
        small {
          font-size: 10px;
          font-weight: normal;
        }
      }
      > p:last-child {
        color: #8e8e8e;
        font-size: 11px;
        > small {
          font-size: 11px;
          text-decoration: line-through;
        }
      }
    }
    > div:last-child {
      color: #fff;
      background: linear-gradient(to bottom, #fe791f, #f25e3a);
      padding: 5px 8px;
      border-radius: 20px;
    }
  }
}
</style>
